<template>
	<view class="longpress-page">
		<longpress :actions="actions" @actionTap="onActionTap" @actionsHide="current = -1">
			<view
				v-for="(n, i) in 15"
				:key="i"
				:class="['item', current==i?'hover':'']"
				@touchstart="onTouche(i)"
				@tap="onTap(i)"
			>
				长按弹出菜单{{i+1}}
			</view>
		</longpress>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				actions: ['编辑', '删除', '分享'],
				current: -1
			}
		},
		methods: {
			onActionTap(i){
				uni.showToast({
					title: `点击了第${this.current+1}项的${this.actions[i]}`,
					icon: 'none'
				})
				this.current = -1
			},
			onTouche(i){
				this.current = i
			},
			onTap(i){
				setTimeout(()=>{
					this.current = -1
				}, 100)
			}
		}
	}
</script>

<style lang="scss">
page{
	background: $page-bg;
}
.longpress-page{
	.item{
		padding: 30upx;
		background: #fff;
		margin: 20upx 0;
	}
	.hover{
		background: #f2f2f2;
	}
}
</style>
